
import React, { useRef } from 'react'
import FindDomNodeDemo from './components/FindDomNodeDemo'
function App() {
  const userRef = useRef()

  return (
    <div className="App" id="box1">
      <form>
        <div>App:<input type="text" name="username" ref={userRef} /></div>
        <button type='button' onClick={() => {
          console.log(userRef.current.value);
        }}>submit</button>
      </form>
      <LoginView />
      <DefaultValueView />
      <FindDomNodeDemo />
    </div>
  );
}

export default App;

// class组件的ref创建
class LoginView extends React.Component {
  constructor() {
    super()
    this.myRef = React.createRef()
    // this.sexRef = React.createRef()
    this.sex = ''
    this.file = null
    this.fileRef = React.createRef()
  }
  componentDidMount() {
    console.log(this.myRef); //{current: input}
    this.myRef.current.focus();
  }
  render() {
    return (
      <div className="App">
        <form>
          <div>LoginView:
            <br />
            username:<input type="text" name="username" ref={this.myRef} /></div>
          <div>
            sex: <br />
            {/* ref的回调函数里面，input就是当前ref绑定的DOM节点对象 */}
            <input type="radio" name="sex" value="男" ref={(input) => this.sex1 = input} />男
            <br />
            <input type="radio" name="sex" value="女" ref={(input) => this.sex2 = input} />女
          </div>
          <div>
            头像：
            <input type="file" name='file' ref={(input) => this.file = input} />
          </div>
          <div>
            头像：
            <input type="file" name='file' ref={this.fileRef} />
          </div>
          <button type='button' onClick={() => {
            // console.log(this.myRef.current.value);
            // console.log(this.sex1.checked);
            // console.log(this.sex2.checked);
            // this.setState({
            //   sex: this.sex1.checked && this.sex1.value || this.sex2.checked && this.sex2.value
            // },
            //   () => {
            //     console.log(this.state.sex);
            //   })

            // 文件上传时，只能时非受控组件：
            console.log(this.file.files[0]);  // File {name, size,type,...}
            // let fileObj = this.file.files[0]
            // let myFormatData = new FormData();
            // myFormatData.append('file', fileObj)

            console.log(this.fileRef.current.files[0]);// File {name, size,type,...}
          }}>submit</button>
        </form>
      </div>
    )
  }
}

// 默认值，默认选中，多表单元素处理的函数
class DefaultValueView extends React.Component {
  constructor() {
    super()
    this.state = {
      username: "文老头",
      password: "",
      gf: '举重运动员'
    }
    this.handerChange = this.handerChange.bind(this)

  }

  // handerChange(e) {
  //   this.setState(
  //     {
  //       username: e.target.value
  //     },
  //     () => {
  //       console.log(this.state.username);
  //     }
  //   )
  // }

  // 多个输入框，使用同一个函数来获取值
  handerChange(e) {
    const { name, value, checked, type } = e.target;  // 解构出元素DOM节点的 name,value,checked属性
    console.log(name, value, checked, type);
    this.setState({
      [name]: value  // 必须要求state的属性名，要和input输入框的name的值一致。
    })

  }
  render() {
    return (
      <form>
        <div>
          {/* value,defaultValue只能2选1. */}
          <input type="text" name="username" defaultValue={this.state.username} onChange={this.handerChange} />
        </div>
        <div>
          <input type="text" name="password" defaultValue={this.state.password} onChange={this.handerChange} />
        </div>
        <div>
          <input type="radio" name="gf" defaultChecked={this.state.gf === '明星'} onChange={this.handerChange} value="明星" />明星
          <input type="radio" name="gf" defaultChecked={this.state.gf === '举重运动员'} onChange={this.handerChange} value="举重运动员" />举重运动员
        </div>
        <button type='button' onClick={() => {
          console.log(this.state);
        }}>submit</button>
      </form>
    )
  }
}